/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 18:03:18
 * @LastEditTime: 2023-04-11 21:24:00
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Flex, Icon, SimpleGrid, Text } from '@chakra-ui/react';
import { setSelectedArtisticEffect } from 'features/parameters/store/presetSlice';
import { MdNotInterested } from 'react-icons/md';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import ArtisticEffectItem, { ArtisticEffect } from './ArtisticEffectItem';
export const ArtisticEffectPickerContent = () => {
  const { artisticEffect } = useAppSelector((store) => store.preset);
  const dispatch = useAppDispatch();

  return (
    <SimpleGrid columns={{ base: 2, md: 4, lg: 5, xl: 6 }} spacing={4}>
      <Flex flexDirection="column" gap="1">
        <Flex
          h="8rem"
          w="8rem"
          onClick={() => dispatch(setSelectedArtisticEffect([]))}
          justify="center"
          align="center"
          cursor="pointer"
          bg="base.900"
          border="3px solid"
          borderColor="base.850"
          rounded="md"
        >
          <Icon as={MdNotInterested} fontSize="2rem" />
        </Flex>
        <Text textAlign="center" fontWeight={400} color="base.300">
          清除艺术效果
        </Text>
      </Flex>
      {artisticEffect.map((a: ArtisticEffect) => (
        <ArtisticEffectItem key={a.id} {...a} />
      ))}
    </SimpleGrid>
  );
};

export default ArtisticEffectPickerContent;
